<!--
 * @Description: 
 * @Author: HuRrongChao
 * @Date: 2024-12-16 14:23:02
 * @LastEditors: HuRrongChao
 * @LastEditTime: 2025-03-13 22:03:28
-->
<template>
  <div class="container-content" ref="containerRef">
    <slot></slot>
    <teleport :to="'body'">
      <transition @beforeEnter="handleBeforeEnter" @enter="handleEnter" @afterEnter="handleAfterEnter">
        <div class="mean-content" v-show="visible" :style="{ top: y + 'px', left: x + 'px' }">
          <div class="mean-item"
          v-for="(item, index) in menu" :key="index"
          @click="handleClick(item)">
          {{ item ? item.label : '' }}
          </div>
        </div>
      </transition>
    </teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import teleport from '../Teleport.vue'
import { useContextMenu } from './hooks/useContextMenu'

const containerRef = ref()
const { x, y, visible } = useContextMenu(containerRef)

const props = defineProps({
  menu: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['select'])

const handleClick = () => {
  emit('select', item)
}

const handleBeforeEnter = (el) => {
  el.style.height = 0
}

const handleEnter = (el) => {
  el.style.height = 'auto'
  const h = el.clientHeight
  el.style.height = 0
  // 告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。
  requestAnimationFrame(() => {
    el.style.height = h + 'px'
    el.style.transition = 'all .3s'
  })
}

const handleAfterEnter = (el) => {
  el.style.transition = 'none'
}
</script>

<style scoped>
.mean-content {
  z-index: 9999;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: auto;
  border-radius: 16px;
  background-color: rgb(235, 235, 235);
  overflow: hidden;
}
.mean-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-left: 30px;
  transition: all 0.3s;
  cursor: pointer;
}
.mean-item:last-child {
  margin-bottom: 10px;
}
.mean-item:hover {
  background-color: rgb(46, 107, 212);
  color: #fff
}
</style>